<template>
  <div class="supplier-slide-from">
    <el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth">
      <el-form-item label="字段名称" prop="title">
        <el-col :span="12">
          <el-input v-model="form.title"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="英文标识" prop="iden">
        <el-col :span="12">
          <el-input :disabled="row.id?true:false" v-model="form.iden"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="表单类型" prop="types">
        <el-col :span="12">
          <el-select v-model="form.types" placeholder="请选择表单类型">
             <el-option label="文本框" value="1"></el-option>
             <el-option label="单选" value="2"></el-option>
             <el-option label="多选" value="3"></el-option>
             <el-option label="下拉" value="4"></el-option>
             <el-option label="时间" value="5"></el-option>
             <el-option label="图片" value="6"></el-option>
             <el-option label="文本域" value="7"></el-option>
            </el-select>
        </el-col>
      </el-form-item>

      <el-form-item label="参数" prop="parameter" v-if="form.types=='2' ||form.types=='3'||form.types=='4'">
        <el-col :span="12">
          <el-input v-model="form.parameter" type="textarea" rows='3'></el-input>
          <div class="tl">
            请使用@作为分隔符
          </div>
        </el-col>
      </el-form-item>

      <el-form-item label="是否开启" prop="is_open">
        <el-col :span="12" class="tl">
          <el-switch
            class="zdySwith"
            :width="82"
            v-model="form.is_open"
            active-color="#1aad19"
            inactive-color="#ffffff"
            active-text="开启"
            inactive-text="关闭"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-col>
      </el-form-item>

      <el-form-item label="是否必填" prop="is_verification">
        <el-col :span="12" class="tl">
          <el-switch
            class="zdySwith"
            :width="82"
            v-model="form.is_verification"
            active-color="#1aad19"
            inactive-color="#ffffff"
            active-text="是"
            inactive-text="不是"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-col>
      </el-form-item>

      <el-form-item label="备注" >
        <el-col :span="12">
          <el-input  v-model="form.remark"  type="textarea">
           
          </el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="默认文字" >
        <el-col :span="12">
          <el-input  type="textarea" v-model.number="form.default">
          </el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "supplier-slide-from",
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {
        title: "",
        bid: "",
        remark: "",
        default: "",
        types: "",
        parameter: "",
        is_open: "",
        is_verification: ""
      },
      rules: {
        title: [{ required: true, message: "请输入表名称", trigger: "blur" }],
        types: [
            { required: true, message: '请选择表单类型', trigger: 'change' }
          ],
        iden: [{ required: true, message: "请输入英文标识", trigger: "blur" }],
      },
      formLabelWidth: "120px",
      bool: true
    };
  },
  created() {
    if (JSON.stringify(this.row) != "{}") {
      this.form = JSON.parse(JSON.stringify(this.row))
    }
  },
  mounted() {},
  methods: {
    addBd(params) {
        params.bid=this.$route.query.id;
      this.$api.getCharacter.characterFieldSaveadd(params).then(res => {
        if (res.data.code == 200) {
          this.$emit("hideDio", true);
          this.$fnc.alertSuccess({ text: "添加成功" });
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    editBd(params) {
      this.$api.getCharacter.characterFieldSaveEdit(params).then(res => {
        if (res.data.code == 200) {
          this.$emit("hideDio", true);
          this.$fnc.alertSuccess({ text: "修改成功" });
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // this.$emit('hideDio')
          this.$bus.$emit("hide-from");
          var params = {};
          params = this.form;
          if (params.id) {
            this.editBd(params);
          } else {
            this.addBd(params);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang='less' scoped>
</style>
